<template>
  <div class="wrapper">
    <div class="nav">
      <div class="item" :class="{ active: activePath === item.path }" v-for="(item, index) in menu" :key="index" @click="selectMenu(item)">
        <el-icon class="mr-8">
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.title }} </span>
      </div>
    </div>
    <div class="extend">
      <el-switch
        class="mr-20"
        active-action-icon="el-icon-sunny"
        inactive-action-icon="el-icon-moon"
        active-value="light"
        inactive-value="dark"
        v-model="theme"
        @change="handleChangeTheme"
      />

      <template v-if="isUpload">
        <el-select class="object mr-20" v-model="objectType" @change="handleChangeType">
          <el-option :value="0" label="我方"></el-option>
          <el-option :value="1" label="敌方"></el-option>
        </el-select>

        <!-- <el-button type="primary" @click="handleExportExcel">导出excel</el-button> -->
        <el-button type="danger" @click="clearDatas">清除数据</el-button>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from "vue";
import { useStore } from "vuex";

const homePage = [
  {
    title: "首页",
    icon: "el-icon-home-filled",
    path: "/home",
  },
];
const dataPage = [
  {
    title: "职业分配",
    icon: "el-icon-set-up",
    path: "/allocation",
  },
  {
    title: "概览",
    icon: "el-icon-monitor",
    path: "/overview",
  },
  {
    title: "总数据",
    icon: "el-icon-tickets",
    path: "/datas",
  },
  {
    title: "团总数据",
    icon: "el-icon-memo",
    path: "/group-datas",
  },
  {
    title: "个人数据图表",
    icon: "el-icon-user",
    path: "/player-chart",
  },
  {
    title: "数据对比",
    icon: "el-icon-gold-medal",
    path: "/pvp",
  },
];
const expendPage = [
  // {
  //   title: "红头文件",
  //   icon: "el-icon-warn-triangle-filled",
  //   path: "/official-documents",
  // },
  // {
  //   title: "博饼",
  //   icon: "el-icon-food",
  //   path: "/mooncake-gambling",
  // },
  // {
  //   title: "词条范围",
  //   icon: "el-icon-message-box",
  //   path: "/entries-computed",
  // },
  // {
  //   title: "科举",
  //   icon: "el-icon-chat-dot-square",
  //   path: "/imperial",
  // },
];

const store = useStore();
const menu = ref([].concat(homePage, expendPage));
const activePath = ref("");
const objectType = ref(store.state.objectType);
const isUpload = computed(() => store.state.isUpload);
const theme = ref("dark");

const emits = defineEmits(["selected"]);

watch(
  () => store.state.isUpload,
  (v) => {
    if (v) {
      menu.value = [].concat(homePage, dataPage);
    } else {
      menu.value = [].concat(homePage, expendPage);
    }
  }
);

/** 选中菜单 */
const selectMenu = (item: any) => {
  activePath.value = item.path;
  emits("selected", item);
};
/** 清除数据 */
const clearDatas = () => {
  selectMenu(menu.value[0]);
  store.commit("clearDatas");
};
/** 修改对象 */
const handleChangeType = () => {
  store.commit("setObjectType", objectType.value);
};
/** 修改主题 */
const handleChangeTheme = () => {
  document.querySelector("html").className = theme.value;
};
// const handleExportExcel = () => {
//   exportExcel(store.getters.getDatas);
// }

onMounted(() => {
  selectMenu(menu.value[0]);
});
</script>

<style scoped lang="scss">
.wrapper {
  --background: #415a72;
  height: 100%;
  background-color: var(--background);
  padding: 0 20px;
  display: flex;
}

.nav {
  height: 100%;
  width: 100%;
  display: flex;

  .item {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    margin: 10px 10px 10px 0;
    border-radius: 4px;
    font-size: 14px;

    &:hover {
      background-color: var(--el-color-primary-dark-2);
    }

    &.active {
      background-color: var(--el-color-primary);
    }
  }
}

.extend {
  display: flex;
  justify-content: center;
  align-items: center;
}

.object {
  width: 6rem;
}
</style>
